<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link href="/ui/pc/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/ui/bootstrapIcon/font/bootstrap-icons.min.css">
    <link href="/ui/pc/css/cross.css" rel="stylesheet"/>
    <link href="/ui/pc/css/change.css" rel="stylesheet"/>
    <link href="/ui/pc/css/style.css" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated">
    <div class="table-con">
        <div data-type="menuBtnGroup">

        </div>
        <div class="row mt-20">
            <div class="col-xs-3">
                <div data-type="menuTreeWrap" class="c-border" style="height:calc(100vh - 145px);overflow: auto"></div>
            </div>
            <div class="col-xs-9">
                <h2 data-type="menuFormTitle" class="ml15 mb20" style="font-weight: bold;"></h2>
                <div data-type="menuFormWrap"></div>
            </div>
        </div>
    </div>

</div>

<script src="/ui/pc/js/jquery.min.js?v=2.1.4"></script>
<script src="/admin/public/util.js"></script>

<!--菜单树-->
<script src="/ui/pc/js/zTree/3.5.18/js/jquery.ztree.min.js"></script>
<link href="/ui/pc/js/zTree/3.5.18/css/zTreeStyle.css" rel="stylesheet" type="text/css">
<script src="/admin/menu/js/getMenuTree.js"></script>

<!--图片上传-->
<link href="/ui/pc/js/lightbox/css/lightbox.min.css" rel="stylesheet" />
<script src="/ui/pc/js/lightbox/js/lightbox.js"></script>
<script src="/admin/public/uploadFile.js"></script>
<script src="/admin/public/getUploadImgWidget.js"></script>

<script src="/admin/menu/js/getAddMenuForm.js"></script>
<script src="/admin/menu/js/getUpdMenuForm.js"></script>
<script src="/admin/menu/js/delMenuDialog.js"></script>

<script>
    const $menuTreeWrap = $('[data-type="menuTreeWrap"]');
    const $menuFormWrap = $('[data-type="menuFormWrap"]');
    const $menuFormTitle = $('[data-type="menuFormTitle"]');
    const $menuBtnGroup = $('[data-type="menuBtnGroup"]');

    const $addMenuBtn = $(`<a class="search-btn mr-20 plr10" style="width: auto" href="javascript:">新增菜单</a>`);

    let menuZTree = null;
    let currTreeNode = null;

    const $getMenuTreeParam = {
        callback(zTree) {
            menuZTree = zTree;
            zTree.setEditable(true);
        },
        onRemove(treeNode) {
            delMenuDialog({
                ...treeNode.data,
                callback() {
                    menuZTree.removeNode(treeNode, false);
                }
            })
            return false;
        },
        onClick(treeNode) {
            currTreeNode = treeNode;
            const menuInfo = treeNode.data;
            $menuFormTitle.text("编辑菜单");
            $menuFormWrap.html(getUpdMenuForm({
                ...menuInfo,
                callback: () => {
                    const $menuTree = getMenuTree($getMenuTreeParam);
                    $menuTreeWrap.html($menuTree);
                }
            }));
        }
    };


    const $menuTree = getMenuTree($getMenuTreeParam);
    $menuTreeWrap.html($menuTree);

    $addMenuBtn.on("click", () => {
        let menuInfo = currTreeNode?.data
        if (currTreeNode && currTreeNode.getParentNode()) {
            menuInfo = currTreeNode.getParentNode().data;
        }

        $menuFormTitle.text("新增菜单");
        $menuFormWrap.html(getAddMenuForm(menuInfo, () => {
            const $menuTree = getMenuTree($getMenuTreeParam);
            $menuTreeWrap.html($menuTree);
        }));
    })

    $menuBtnGroup.html($addMenuBtn);
    $addMenuBtn.click();

</script>
</body>
</html>